<template>
	<view class="page-body paround40">
		<view class="h2">申请找回密码</view>
		<view class="p">输入您已绑定的银行卡账号</view>
		<view class="textcode flex ">
			<text>您的账户</text>
			<input class="flex1" type="number" maxlength="11" placeholder-style="color:#c7c7c7"  v-model="usermobile" disabled />
		</view>
		<view class="textcode flex mt15">
			<text>银行卡号</text>
			<input class="flex1" type="text" maxlength="23" placeholder="请输入已绑定银行卡号" @input="inputCard" placeholder-style="color:#c7c7c7" v-model="bankcard"  />
		</view>
		<view class="textcode flex" >
			<text class="flex0">验证码</text>
			<input class="flex1" maxlength="6" type="number" placeholder="短信验证码" v-model="textcode" placeholder-style="color:#c7c7c7" @input="bindCode" />
			<view :class="['btn btn-getcode flex0',isDisabledCode?'disabled':'']" @click="resendCode">{{cdNum}}</view>
		</view>
		<view :class="['button mt50',isNextStep?'primary':'disabled']" :disabled="!isNextStep" @click="nextStep">下一步</view>
	</view>
</template>

<script>
	var that;
	import {
	    mapState,
	    mapMutations
	} from 'vuex'	
	import {isPoneAvailable,trim,TimeStorage} from '@/utils/utils.js';
	import {banksList} from '@/common/js/banklist.js';
	import {bankcon} from '@/common/js/bankcon.js'
	export default{
		data(){
			return{
				onfocus:false,
				isNextStep:false,
				bankcard:"",
				cardNum:"",//银行卡号码（去除空格）
				hasbank:false,
				textcode:"",
				cdNum:"获取验证码",
				isDisabledCode:false,
			}
		},
		computed:mapState({
			usermobile(state){
				let usermobile = state.usermobile || TimeStorage.geted('mobile') ;
				usermobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
				return usermobile
			}
		}),
		onLoad(options){
			that=this;
		
		},
		onShow(options){
			
		},
		methods:{
			nextStep(){
				if(this.textcode.length!=6){
					this.$showToast('请填写验证码')
					return false;
				}
				if(this.isNextStep){
					uni.navigateTo({
						url:"/pages/user/SAM/payword/findpayword2?textcode="+this.textcode+"&token="+this.token
					})
				}
			},
			resendCode(){
				//接口请求验证码
				uni.showLoading({
					title:"验证码发送中"
				})
				this.$https.POST({
					url:'/pay/findPasswordApply',
					data:{
						linked_acctno:that.cardNum,
					},
					success(res){
						uni.hideLoading()
						that.token = res.data.token
						uni.showToast({
							title:"动态验证码发送成功",
							icon:"none"
						})
						countBackwards()
					},
					showfailsure(res){
						uni.hideLoading()
						clearInterval(clock);
					}
				})
			},
			bindCode(e){
				let value=e.detail.value;
				let phoneNum=this.phoneNum;
				if(value.length==6){
					// 校验验证码
					this.textcode=value;
					that.checkIsNextStep()
				}
			},
			inputCard(e){
				let value=e.detail.value;
				setTimeout(()=>{
					that.bankcard=value.replace(/[^\d]/g,'').replace(/([\d]{4})(?=\d)/g,'$1 ')//银行卡格式
					let cardNum=trim(value,'g');
					that.cardNum=cardNum;
					if(cardNum.length<3){
						that.hasbank=false;
					}
					var curNum = cardNum.substr(0,6);
					let bankMsg=banksList.find((item,index)=>{//根据前六位数判定对应银行
						return curNum.includes(item.num)
					})
					if(bankMsg){
						// that.inputbankName=bankMsg.name;
						that.hasbank=true;
						// 根据名称判断是否是支持的银行
						// let supportbank=bankcon.find((item,index)=>{
						// 	return item.name==bankMsg.name
						// })
						// if(supportbank){
						// 	// that.bankposition=supportbank.iconurl;
						// 	that.hasbank=true;
						// }else{
						// 	that.hasbank=false
						// }
					}else{
						that.hasbank=false;
					}
					if(cardNum.length>6){
						if(!that.hasbank){
							uni.showToast({
								icon:"none",
								title:"请输入正确的银行卡号",
								position:'top'
							})
						}
					}
					that.checkIsNextStep()
				},0)
			},
			checkIsNextStep(){
				if(this.textcode.length==6&&this.hasbank){
					this.isNextStep = true
				}else{
					this.isNextStep = false
				}
			},
			clearbank(){
				// that.inputbankName="";
				that.hasbank=false;
			},
		},
		onBackPress(options) {
			// if (options.from === 'navigateBack') {  
			//     return false;  
			// }  
   //          return true;  
		},
		onUnload() {
			clearInterval(clock);
		}
	}
	var clock;
	function countBackwards() {
	    let nums = 59;
	    let isDisabled = true;
	    let vertifyCode = nums + 's';
	    that.cdNum=vertifyCode;
		that.isDisabledCode=isDisabled;
	    clock = setInterval(function () {
	        nums--;
			// console.log(nums)
	        if (nums > 0) {
	            vertifyCode = nums + 's';
	        } else {
	            clearInterval(clock);
	            isDisabled = false;
	            vertifyCode = '重发验证码';
	            nums = '59'
	        }
	        that.cdNum=vertifyCode;
			that.isDisabledCode=isDisabled
	        // console.log(nums)
	    }, 1000)
	}
</script>

<style lang="scss" scoped="">
	@import '../../../../static/css/user.css';
	.mt70{margin-top: 70upx;}
	.textcode {
		border-bottom: 1px solid #e9e9e9;
	}
	
</style>
